<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; max-width: 800px; }
        .status { padding: 10px; margin: 10px 0; border-radius: 5px; }
        .connected { background: #d4edda; color: #155724; }
        .disconnected { background: #f8d7da; color: #721c24; }
        .messages { height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin: 10px 0; background: #f8f9fa; }
        .message { margin: 5px 0; padding: 5px; }
        .notification { color: #0066cc; font-weight: bold; }
        .controls { margin: 10px 0; }
        .controls input, .controls button { margin: 5px; padding: 8px; }
        #tokenInput { width: 400px; }
    </style>
</head>
<body>
    <h1>WebSocket实时消息推送测试</h1>
    
    <div id="status" class="status disconnected">状态：未连接</div>
    
    <div class="controls">
        <input type="text" id="tokenInput" placeholder="请输入用户Token">
        <button onclick="connect()">连接</button>
        <button onclick="disconnect()">断开</button>
        <button onclick="clearMessages()">清空</button>
    </div>
    
    <div id="messages" class="messages">等待连接...</div>
    
    <h3>使用说明</h3>
    <ol>
        <li>从浏览器开发者工具中获取用户Token</li>
        <li>粘贴到输入框，点击"连接"</li>
        <li>连接成功后会自动发送心跳</li>
        <li>在其他页面点赞/收藏视频，这里会收到实时通知</li>
    </ol>

    <script>
        let websocket = null;
        let heartbeatTimer = null;
        
        function addMessage(content, type = '') {
            const messages = document.getElementById('messages');
            const div = document.createElement('div');
            div.className = `message ${type}`;
            div.innerHTML = `[${new Date().toLocaleTimeString()}] ${content}`;
            messages.appendChild(div);
            messages.scrollTop = messages.scrollHeight;
        }
        
        function updateStatus(connected) {
            const status = document.getElementById('status');
            status.className = connected ? 'status connected' : 'status disconnected';
            status.textContent = connected ? '状态：已连接' : '状态：未连接';
        }
        
        function connect() {
            const token = document.getElementById('tokenInput').value.trim();
            if (!token) {
                alert('请输入Token');
                return;
            }
            
            if (websocket) websocket.close();
            
            const wsUrl = `ws://localhost:8080/websocket?token=${token}`;
            addMessage(`连接中: ${wsUrl}`);
            
            websocket = new WebSocket(wsUrl);
            
            websocket.onopen = () => {
                updateStatus(true);
                addMessage('✅ 连接成功', 'notification');
                startHeartbeat();
            };
            
            websocket.onmessage = (event) => {
                try {
                    const message = JSON.parse(event.data);
                    if (message.type === 'heartbeat') {
                        addMessage('💗 心跳响应');
                    } else if (message.type === 'notification') {
                        addMessage(`🔔 ${message.data}`, 'notification');
                    } else {
                        addMessage(`📨 ${JSON.stringify(message)}`);
                    }
                } catch (e) {
                    addMessage(`收到: ${event.data}`);
                }
            };
            
            websocket.onclose = (event) => {
                updateStatus(false);
                addMessage(`❌ 连接关闭 (${event.code})`);
                stopHeartbeat();
            };
            
            websocket.onerror = (error) => {
                addMessage(`❌ 连接错误: ${error}`);
            };
        }
        
        function disconnect() {
            if (websocket) {
                websocket.close();
                websocket = null;
            }
            stopHeartbeat();
        }
        
        function startHeartbeat() {
            heartbeatTimer = setInterval(() => {
                if (websocket?.readyState === WebSocket.OPEN) {
                    websocket.send(JSON.stringify({
                        type: 'heartbeat',
                        timestamp: Date.now()
                    }));
                }
            }, 30000);
        }
        
        function stopHeartbeat() {
            if (heartbeatTimer) {
                clearInterval(heartbeatTimer);
                heartbeatTimer = null;
            }
        }
        
        function clearMessages() {
            document.getElementById('messages').innerHTML = '';
        }
        
        window.addEventListener('beforeunload', disconnect);
    </script>
</body>
</html>